<template>
    <div class="box1">
    <div class="box2">
        <span>发现好歌单</span>
    </div>
    <div class="box3">
        <span>查看更多</span>
    </div>
    </div>
    <div class="image_tp">
        <van-swipe :loop="false" :width="110" :show-indicators="false">
        <van-swipe-item v-for="item in music" :key="item"> 
            <router-link :to="{path:'/itemMusic',query:{id:item.id}}">
            <img :src="item.picUrl" alt="" class="img">
            <span class="name">{{item.name}}</span>
            <div class="play"> 
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-24gl-play"></use>
            </svg>
            <span class="Play_volume">{{bf(item.playCount)}}</span>
        </div>
       </router-link>        
        </van-swipe-item>
   
       </van-swipe>
    </div>
</template>
<script>
import { getMusicList } from '@/request/api/home';
export default {
data(){
    return{
        music:[]
    }
},
methods:{
async getGedan(){
   let res=await getMusicList();
//    console.log(res)
   this.music=res.data.result 
},
bf(item)
{
    let count=(item/10000).toFixed(1)
    // return count+'万'
    return `${count}万`
}
},
computed:{

},
mounted(){
this.getGedan()
}
}
</script>
<style lang="less" scoped>
.box1{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .box2 span{
    margin-left: 20px;
    font-size: 18px;
   font-weight:600;
    }
    .box3{
        padding: 5px;
        border: 1px solid #D5D5D5;
        border-radius: .4rem;
        margin-right: 15px;
    }
}
.image_tp{
    width: 100%;
    height: 4rem;
    display: flex;
    position: relative;
    .van-swipe{
        height: 100%;
        .van-swipe-item {
            margin-left: .24rem;
        }
        .play{
            display: flex;
            align-items: center;
            position: absolute;
            right:.04rem;
            top:.04rem;
            color: #E4D8E2;
       ::v-deep .icon{
        width: .3rem;
        height: .3rem;
        } 
        .Play_volume{
            font-size: .18rem;
            font-weight: 200;
        }
        }
        img{
            height: 70%;
            width: 2.2rem;
            border-radius: 5px;
        }
        .name{
            font-size: 12px;
        }
    }
}
a{
  color: black;
}
</style>
